<template>
  <view class="bjys">
    <view v-if="count != 0" @click="navigateBtn()" class="play_back">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <view class="title">
      糖蜜福利
    </view>
    <view class="content" v-if="hd">
      <view class="swiperItem">
        <swiper class="swiper3" :duration="1000" autoplay :interval="2000" circular :current="current" @change="change">
          <swiper-item v-for="(item,index) in hd" :key="index" @click="webBtn(item.hd_url)">
            <view class="swiper3_item" :class="current==index?'swiper2_active':''">
              <image class="" :src="item.hd_pic" mode="widthFix"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="list_detai">
      <view :class="stamp? 'detail' : 'detail2'" @click="detailBtn(item.name)" v-for="(item,index) in txttype"
        :key="index">
        <image :src="item.pic" mode="widthFix"></image>
        <p>{{ item.name }}</p>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        hd: [],
        current: 0,
        txttype: [],
        tab1list: [],
        txtList1: [],
        count: 0,
        page: 1,
        name: ''
      }
    },
    onLoad() {
      this.$http.sclist().then(res => {
        console.log(res)
      }).catch(err => {})
      this.$http.indexIn().then(res => {
        if (res.code == 200) {
          this.hd = res.data.hd;
        }
      })
      this.$http.txttype().then(res => {
        if (res.code == 200) {
          this.txttype = res.data.txttype;
        }
      })
    },
    // onReachBottom() {
    //   if (this.count != 0) {
    //     uni.showLoading({
    //       title: '加载中'
    //     })
    //     this.page++;
    //     this.$http.txttype({
    //       p: this.page,
    //       t: this.name
    //     }).then(res => {
    //       this.txttype = [...this.txttype, ...res.data.txttype];
    //       uni.hideLoading();
    //     })
    //   }
    // },
    methods: {
      navigateBtn() {
        this.count = 0;
        this.$http.txttype().then(res => {
          if (res.code == 200) {
            this.txttype = res.data.txttype;
          }
        })
      },
      webBtn(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
      },
      detailBtn(name) {
        this.name = name;
        this.$http.txttype({
          p: this.page,
          t: name
        }).then(res => {
          if (res.code == 200) {
            this.count++;
            if (res.data.txttype == null) {
              uni.navigateTo({
                url: '/pages/other/index1?name=' + name
              })
            } else {
              this.txttype = res.data.txttype;
            }
          }
        })
      },
      change(e) {
        let num = e.detail.current;
        this.current = num;
      },
    }
  }
</script>

<style lang="less">
  .bjys {
    .title {
      margin-top: 20rpx;
      font-size: 32rpx;
      text-align: center;
      color: #FFFFFF;
    }
  }

  .content {
    // background-color: black;
    padding-bottom: 15rpx;
  }

  .swiperItem {
    position: relative;
    width: 100%;
    min-height: 210rpx;
    margin-bottom: 30rpx;
  }

  .swiper3 {
    position: relative;
    width: 100%;
    height: 440rpx;
    display: flex;
    align-items: center;

    swiper-item {
      text-align: center;

      .swiper3_item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        transition: all 0.5s ease;
        overflow: hidden;
        border-radius: 40rpx;

        image {
          width: 100%;
        }
      }
    }
  }

  .list_detai {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 92%;
    margin: 0 auto;

    .detail2 {
      width: 100%;
      border-radius: 25rpx;

      image {
        width: 100%;
        border-radius: 25rpx;
      }
    }

    .detail {
      border-radius: 25rpx;
      margin-right: 30rpx;
      width: 45%;

      image {
        width: 100%;
        border-radius: 25rpx;
      }

      p {
        width: 100%;
        text-align: center;
      }
    }
  }

  .detail_cont {
    position: relative;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      right: 20rpx;
      z-index: 9;
      border-radius: 0rpx 0 0 20rpx;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }

  .detail_cont1 {
    position: relative;
    text-align: center;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      right: 20rpx;
      z-index: 9;
      border-radius: 0rpx 0 0 20rpx;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }

  .play_back {
    width: 60rpx !important;
    height: 60rpx !important;
  }

  // .swiper2_active {
  //   transform: scale(1.4);
  // }
  .a-center {
    color: #384959;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    float: left;
  }
</style>
